<style lang="scss" scoped>
.search {
    background: #f4f4f4;

    .sousuo {
        background: white;
    }
}

header {
    text-align: center;
    background: white;

    input {
        margin: 10px 0;
        padding-left: 20px;
        width: 80%;
        height: 40px;
        line-height: 40px;
        border-radius: 20px;
        border: 1px solid #12df2d;
        font-size: 15px;
    }

    span {
        color: #999;
        margin-left: 15px;
    }
}

.remen {
    width: 90%;
    margin: 0 auto;
    position: relative;

    h4 {
        padding: 10px 0;
        font-weight: normal;
    }

    div {
        display: flex;
        flex-wrap: wrap;

        span {
            display: block;
            padding: 3px 10px;
            border-radius: 15px;
            background-color: #e7e5e55b;
            color: #999;
            margin: 5px;
            font-size: 14px;
        }
    }

    .van-icon {
        position: absolute;
        right: 0;
        top: 10px;
        color: #999;
    }
}

.tuijian {
    width: 90%;
    height: 50px;
    line-height: 50px;
    border-bottom: 1px solid #e8e7e7;

    .van-icon {
        font-size: 18px;
        width: 30px;
        height: 30px;
    }
}

.tu {
    margin-top: 10px;
    text-align: center;

    img {
        width: 95%;
        border-radius: 5px;
    }
}

.tablist {
    padding: 20px 10px;
    background: white;
    margin: 10px;
    border-radius: 6px;

    .top {
        display: flex;

        .left {
            width: 50px;
            margin: 0 5px;

            img {
                width: 50px;
                height: 50px;
                border-radius: 50%;
                border: 1.5px solid #44d477;
            }
        }

        .right {
            margin: 0;
            line-height: 20px;

            .right-top {
                display: flex;
                margin: 5px 0;

                span {
                    margin: 0;
                }

                .border::after {
                    display: block;
                    width: 10px;
                    text-align: center;
                    height: 10px;
                    margin-top: 5px;
                    border-right: 1px solid #ccc;
                    content: "";
                }

                .title {
                    margin-left: 8px;
                    font-size: 14px;
                }

                .tag {
                    margin-left: 5px;
                    font-size: 13px;
                    padding: 1px 2px;
                    background: #e4eef4;
                    color: rgb(44, 116, 224);
                }
            }

            .right-bottom {
                span {
                    margin: 0 3px;
                }

                .city {
                    color: rgb(20, 187, 5);
                }

                .hospital {
                    font-size: 14px;
                }

                .type {
                    background: #1cc381;
                    color: white;
                    font-size: 14px;
                    padding: 1px 3px;
                    border-radius: 3px;
                }

                .tagname {
                    font-size: 13px;
                    background-color: rgba(244, 226, 184, 0.849);
                    color: rgba(147, 106, 9, 0.849);
                }
            }
        }
    }

    .middle {
        margin: 10px 0;

        div {
            width: 95%;
            font-size: 14px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
        }

        p {
            margin: 10px;

            span {
                color: #999;
                font-size: 14px;
                margin-right: 20px;
            }

            .xing {
                color: #6c6b6b;
                font-weight: 600;

                img {
                    width: 14px;
                    height: 14px;
                }
            }

            .num {
                span {
                    font-weight: 600;
                    color: #6c6b6b;
                }
            }
        }
    }

    .bottom {
        width: 95%;

        span {
            padding: 5px;
            border: 1.5px solid #44d477;
            border-radius: 15px;
            color: #1cc381;
            font-size: 14px;
        }
    }
}

.tab {
    .tabname {
        background: white;
        text-align: center;
        height: 30px;
        line-height: 30px;

        span {
            display: inline-block;
            width: 25%;
        }
    }
}

.tan {
    position: fixed;
    top: 43%;

    .city {
        display: flex;

        .left {
            height: 450px;
            overflow: auto;
            width: 50%;
            background: #e8e8e8;

            >div {
                line-height: 30px;
                padding: 10px;

                div {
                    width: 100%;
                    line-height: 30px;
                    padding: 10px 0;
                    background: #cbc9c9;
                    color: #000;
                }
            }
        }

        .right {
            flex: 1;
            height: 450px;
            overflow: auto;

            div {

                div {
                    line-height: 30px;
                    padding: 10px;
                }
            }

        }
    }

    .sort {
        p {
            line-height: 30px;
            padding: 10px;
            border-bottom: 1px solid #e7e7e7;
        }
    }
}

.active {
    background: white;
    color: #0fea5c;
}
</style>

<template>
    <div class="search">
        <header>
            <input type="text" @input="searchInput" v-model="searchValue" placeholder="输入症状、疾病、医院、科室、医生" @click="input">
            <span @click="search">搜索</span>
        </header>
        <div v-if="flag == true" class="sousuo">
            <!-- 推荐搜索 -->
            <div>
                <div v-for="(item, index) in searchData" :key="index" class="tuijian">
                    <van-icon name="search" />
                    {{ item.item }}
                </div>
            </div>
            <!-- 历史搜索 -->
            <div class="remen">
                <h4>历史搜索</h4>
                <div>
                    <span @click="history(item)" v-for="(item, index) in historylist" :key="index">
                        {{ item }}
                    </span>
                    <van-icon name="delete-o" @click="clear" />
                </div>
            </div>
            <!-- 热门搜索 -->
            <div class="remen">
                <h4>热门搜索</h4>
                <div>
                    <span v-for="(item, index) in remensearchlist" :key="index" @click="getsearch(item)">
                        {{ item.recommend_word }}
                    </span>
                    <van-icon name="replay" @click="replay" />
                </div>
            </div>
            <div class="tu" @click="toimg">
                <img :src="img.image" alt="">
            </div>
        </div>
        <div v-else="" class="tab">
            <div class="tabname">
                <span @click="showPopup">全国</span>
                <span @click="showDepartment">科室</span>
                <span @click="showDisease">疾病</span>
                <span @click="showSort">排序</span>
            </div>
            <div v-for="(item, index) in filterlist" :key="index" class="tablist">
                <div class="top">
                    <div class="left">
                        <img :src="item.img" alt="">
                    </div>
                    <div class="right">
                        <p class="right-top">
                            <span class="name">{{ item.name }}</span>
                            <span class="border"></span>
                            <span class="title">
                                {{ item.title }}
                                {{ item.clinic_name }}
                            </span>
                            <span class="tag" v-if="item.tag1 != ''">
                                {{ item.tag1 }}
                            </span>
                            <span v-else>

                            </span>
                        </p>
                        <p class="right-bottom">
                            <span class="city">{{ item.city }}</span>
                            <span class="hospital">
                                {{ item.hospital }}
                            </span>
                            <span class="type" v-if="item.tag2 != ''">
                                {{ item.tag2 }}
                            </span>
                            <span v-else>

                            </span>
                            <span class="tagname" v-if="item.tag3 != ''">
                                {{ item.tag3 }}
                            </span>
                            <span v-else>

                            </span>
                        </p>
                    </div>
                </div>
                <div class="middle">
                    <div>擅长:{{ item.desc }}</div>
                    <p>
                        <span class="xing">
                            {{ item.descrip }}
                            <img :src="item.descrip_icon" alt="">
                        </span>
                        <span class="num">
                            {{ item.descrip2 }}
                            <span>
                                {{ item.descrip_num }}
                            </span>
                        </span>
                        <span class="num">
                            {{ item.descrip3 }}
                            <span>{{ item.descrip3_num }}</span>
                        </span>
                    </p>
                </div>
                <div class="bottom">
                    <span>
                        {{ item.service_type_verbose }}
                        ￥{{ item.price }}
                    </span>
                </div>
            </div>
        </div>
    </div>
    <van-popup v-model:show="show" :style="{ width: '100%', height: '60%' }" class="tan">
        <div class="city">
            <div class="left">
                <div v-for="(item, index) in city" :key="index" @click="activeIndex(index)"
                    :class="active == index ? 'active' : ''">
                    {{ item.province }}
                </div>
            </div>
            <div class="right">
                <div v-for="(item, index) in city" :key="index">
                    <div v-for="(item, index) in item.cities" :key="index" v-if="index === active">
                        <p @click="changeCity(item)">
                            {{ item }}
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </van-popup>
    <van-popup v-model:show="showDp" :style="{ width: '100%', height: '60%' }" class="tan">
        <div class="city">
            <div class="left">
                <div v-for="(item, index) in department" :key="index" @click="activeIndex1(index)"
                    :class="active1 == index ? 'active' : ''">
                    {{ item.province }}
                </div>
            </div>
            <div class="right">
                <div v-for="(item, index) in department" :key="index">
                    <div v-for="(item, index) in item.cities" :key="index" v-if="index === active1">
                        <p @click="changeDepartment(item)">
                            {{ item }}
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </van-popup>
    <van-popup v-model:show="showDis" :style="{ width: '100%', height: '60%' }" class="tan">
        <div class="city">
            <div class="left">
                <div v-for="(item, index) in disease" :key="index" @click="activeIndex2(index)"
                    :class="active2 == index ? 'active' : ''">
                    {{ item.province }}
                </div>
            </div>
            <div class="right">
                <div v-for="(item, index) in disease" :key="index">
                    <div v-for="(item, index) in item.cities" :key="index" v-if="index === active2">
                        <p>
                            {{ item }}
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </van-popup>
    <van-popup v-model:show="showSt" :style="{ width: '100%', height: '60%' }" class="tan">
        <div class="sort">
            <div>
                <p v-for="(item, index) in sortlist" :key="index" @click="changeSort(item, index)"
                    :class="active3 === index ? 'active' : ''">
                    {{ item }}
                </p>
            </div>
        </div>
    </van-popup>
</template>

<script setup>
import _ from 'lodash';
import { onMounted, ref, computed } from 'vue';
import axios from '../../http/axios';
import { getshi } from '@/http/http';
import city from '../../data/city.json'
import department from '../../data/department.json'
import disease from '../../data/disease.json'

const remensearchlist = ref([])
const searchData = ref([])
const searchlist = ref([])
var filterlist = ref([])
const img = ref([])
const flag = ref(true)
const sortlist = ref([
    '综合排序', '接诊量', '好评', '回复速度'
])
// 弹出层
//TAB切换
const active = ref(0);
const activeIndex = (index) => {
    active.value = index
    // console.log(active.value);
}
// 城市筛选
const show = ref(false);
const showPopup = () => {
    show.value = true;
};
const changeCity = (items) => {
    filterlist = computed(() => {
        return searchlist.value.filter(item => item.city.includes(items));
    });
    console.log(filterlist.value);
    show.value = false;
}

//TAB切换
const active1 = ref(0);
const activeIndex1 = (index) => {
    active1.value = index
    // console.log(active1.value);
}
//科室筛选
const showDp = ref(false)
const showDepartment = () => {
    showDp.value = true;
};
const changeDepartment = (items) => {
    filterlist = computed(() => {
        return searchlist.value.filter(item => item.clinic_name.includes(items))
    })
    console.log(filterlist.value);
    showDp.value = false
}
//TAB切换
const active2 = ref(0);
const activeIndex2 = (index) => {
    active2.value = index
    // console.log(active2.value);
}
// 疾病筛选
const showDis = ref(false)
const cities = ref(disease.cities)
const showDisease = () => {
    showDis.value = true
}
const channgeDisease = (items) => {

}
// TAB切换
const active3 = ref(0);
// 排序
const showSt = ref(false)
const showSort = () => {
    showSt.value = true
}
const changeSort = (item, index) => {
    active3.value = index
    if (index === 1) {
        filterlist = computed(() => {
            return searchlist.value.sort((a, b) => b.descrip_num - a.descrip_num)
        })
    } else if (index === 2) {
        filterlist = computed(() => {
            return searchlist.value.sort((a, b) => b.descrip3_num - a.descrip3_num)
        })
    } else if (index === 3) {
        filterlist = computed(() => {
            return searchlist.value.sort((a, b) => b.price - a.price)
        })
    }
    console.log(filterlist.value);
    showDp.value = false
}
// 历史搜索
const history = (item) => {
    searchValue.value = item
}
// 清空历史
const clear = () => {
    localStorage.removeItem('historylist')
    historylist.value = []
}
// 刷新热门搜索
const replay = () => {
    remenlist()
    console.log(city[0].cities);
}

const searchValue = ref('')
const historylist = ref(JSON.parse(localStorage.getItem('historylist')) || [])
const remenlist = async () => {
    let res = await axios.get('/static/api/search/recommend_tag/', {
        params: {
            from_type: 'home_search',
            version: '10.6.8'
        },
    })
    // console.log(res.data.data.hot_search_words)
    remensearchlist.value = res.data.data.hot_search_words
}
remenlist()

const imglist = async () => {
    let res = await axios.get('/static/api/search/recommend_tag/', {
        params: {
            from_type: 'home_search',
            version: '10.6.8'
        },
    })
    // console.log(res.data.data.ad)
    console.log(res.data.data.ad)
    img.value = res.data.data.ad
}
imglist()

const getsearch = (item) => {
    window.location.href = item.url
}

onMounted(() => {
    axios.get(`/chunyu/doctorlist`).then(res => {
        // console.log(res.data.data)
        searchlist.value = res.data.data
    })
})

const search = () => {
    flag.value = false
    historylist.value.unshift(searchValue.value)
    localStorage.setItem('historylist', JSON.stringify(historylist.value))
    filterlist = computed(() => {
        if (!searchValue.value) {
            return searchlist.value;
        } else {
            return searchlist.value.filter(item => item.name.includes(searchValue.value) || item.clinic_name.includes(searchValue.value) || item.title.includes(searchValue.value));
        }
    });
    console.log(filterlist.value);
}

const input = () => {
    flag.value = true
    const search = () => {
        historylist.value.unshift(searchValue.value)
        localStorage.setItem('historylist', JSON.stringify(historylist.value))
    }

    const searchInput = _.debounce(() => {
        getshi(searchValue.value).then(res => {
            // console.log(res);
            searchData.value = res.data.data.slice(1, res.data.data.length)
            // console.log(searchData.value);
        })
    }, 1000)
}

const toimg = () => {
    console.log(img.value.url);
    window.location.href = img.value.url
}
</script>